<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>基本表单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box">
            <el-form ref="form" label-position="top" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="form.author"></el-input>
                </el-form-item>
                <v-img imgType="dynamic" :img="form.cover_path" imgTips="封面图片"></v-img>
            </el-form>
        </div>
        <el-form label-position="top" label-width="80px;">
          <el-form-item label="内容" prop="content">
            <quill-editor v-model="form.content" :config="editorOption"></quill-editor>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="onSubmit('form')">提交</el-button>
              <el-button v-if="!edit" @click="navTop">取消</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import bus from '../../../bus.js'
import vImg from '../../common/OneImgUpload'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'v-form',
  components: {
    quillEditor,
    vImg
  },
  data: function() {
    return {
      form: {
        title: undefined,
        author: undefined,
        content: undefined
      },
      editorOption: {
        // something config
      },
      rules: {
        title: [{ required: true, message: '请输入标题' }],
        author: [{ required: true, message: '请输入作者名' }],
        content: [{ required: true, message: '请输入内容' }]
      },
      edit: false
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //  进行规则验证
          if (this.form.cover_path === undefined) {
              this.$message.error('请添加封面图片!');
              return
          }
          if (this.form.content === undefined) {
            this.$message.error('请添加封面图片!');
            return
          }
          // 验证通过，进行编辑/添加判断
          if (!this.edit) {
              // 不是编辑，去除id
              delete this.form.id
              APP.ajax('post@dynamic/add', this.form, res => {
                  if (res.data.status === 200) {
                      this.$message.success('添加成功！');
                  }
              })
          } else {
              APP.ajax('post@dynamic/update', this.form, res => {
                  if (res.data.status === 200) {
                      this.$message.success('添加成功！')
                  }
              })
          }
        } else {
          return false;
        }
      });
    },
    navTop() {
      bus.$emit('ViewShow', '取消')
    }
  },
  mounted() {
    if (this.$route.params.id) {
      this.edit = true;
      APP.ajax('post@dynamic/detail', { id: this.$route.params.id }, res => {
        this.form = res.data.data[0]
      })
    }
    bus.$on('changeDynamicImage', e => {
      this.form.cover_path = e;
    })
  }
}
</script>
<style scoped>
.avatar {
  float: left;
  width: 100%;
  height: 100%;
}
</style>
